/*黑名单*/
import React from 'react';
import '../../static/setting/index.styl'
import {Table, Icon, Button, Input, message, Popconfirm, Modal} from 'antd'
import axios from 'axios'
import AddBlacklist from '../../containers/setting/addBlacklist'
import Loading from '../common/Loading'
const confirm = Modal.confirm;

//可编辑输入框
const EditableCell = ({editable, value, onChange}) => (
  <div>
    {editable
      ? <Input style={{margin: '-5px 0'}} value={value} onChange={e => onChange(e.target.value)}/>
      : value
    }
  </div>
);

export default class Blacklist extends React.Component {
  columns = [{
    title: '网站',
    dataIndex: 'website',
    width: '30%',
    render: (text, record) => this.renderColumns(text, record, 'website'),
  }, {
    title: '域名',
    dataIndex: 'domain',
    width: '40%',
    render: (text, record) => this.renderColumns(text, record, 'domain'),
  }, {
    title: '操作',
    key: 'action',
    width: '20%',
    render: (text, record) => {
      const {editable} = record;
      return (
        <div className="editable-row-operations">
          {
            editable ?
              <span>
                  <a onClick={() => this.save(record)}>保存</a>
                  <Popconfirm title="Sure to cancel?" onConfirm={() => this.cancel(record.id)}>
                    <a>取消</a>
                  </Popconfirm>
              </span> : <span onClick={() => {
                this.edit(record.id)
              }}><Icon type="edit" style={{fontSize: '16px', marginRight: '48px'}}/></span>
          }
          <span onClick={() => {
            this.deleteById(record.id)
          }}>
            <Icon type="delete" style={{fontSize: '16px',}}/>
          </span>
        </div>
      );
    }
  }];
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    id: 0, //moduledId
    data: [],
    visible: false,//modal
    loaded: false,
  };

  renderColumns = (text, record, column) => {
    return (
      <EditableCell
        editable={record.editable}
        value={text}
        key={record.id}
        onChange={value => this.handleChange(value, record.id, column)}
      />
    );
  }

  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({selectedRowKeys});
    let selectedIds = selectedRows.map((item) => item.id)
    this.setState({
      id: selectedIds.toString()
    })
  }

  handleChange = (value, id, column) => {
    const newData = [...this.props.blacklist];
    const target = newData.filter(item => id === item.id)[0];
    if (target) {
      target[column] = value;
      this.setState({data: newData});
    }
  }

  deleteById = (id) => {
    confirm({
      title: '提示',
      content: '确定删除吗',
      onOk: () => {
        this.setState({
          id: id
        }, () => {
          this.onDelete()
        })
      },
    });
  };

  onDelete = async () => {
    if (!this.state.id) {
      message.error('请至少选择一条数据!')
      return
    }
    let res = await
      axios.post('vrv-monitor-platform-web/blacklist/delete', {
        id: this.state.id
      })
    if (res.data.statusCode === 200) {
      this.queryBlackList()
      message.success('删除成功');
    } else {
      message.error(res.data.message);
    }
  }

  edit = async (id) => {
    const newData = [...this.props.blacklist];
    const target = newData.filter(item => id === item.id)[0];
    if (target) {
      target.editable = true;
      this.setState({data: newData});
    }
  }

  save = async (item) => {
    let res = await
      axios.post('vrv-monitor-platform-web/blacklist/update', {
        id: item.id,
        website: item.website,
        domain: item.domain,
      })
    if (res.data.statusCode === 200) {
      this.queryBlackList()
    } else {
      message.error(res.data.message);
    }
  }

  cancel = () => {
    this.queryBlackList()
  }

  queryBlackList = () => {
    this.props.settingActions.fetchBlacklist();
    this.setState({data: this.props.blacklist, selectedRowKeys: []});
  }

  componentDidMount() {
    this.showLoading()
    this.queryBlackList()
    this.hideLoading()
  }

  hideModal = () => {
    this.setState({
      visible: false
    })
  }

  showModal = () => {
    this.setState({
      visible: true
    })
  }

  showLoading = () => {
    this.setState({
      loaded: true
    })
  }

  hideLoading = () => {
    this.setState({
      loaded: false
    })
  }


  render() {
    const {selectedRowKeys} = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <div className="blacklist">
        <div className="table-operations">
          <div className="button">
            <Button onClick={() => {
              confirm({
                title: '提示',
                content: '确定删除吗',
                onOk: () => {
                  this.onDelete();
                },
              })
              }}>删除</Button>
            <Button onClick={() => {
              this.showModal()
            }}>添加</Button>
          </div>
        </div>
        {
          !this.state.loaded ?
            <Table rowSelection={rowSelection} columns={this.columns} dataSource={this.props.blacklist} rowKey="id"/>
            : <Loading/>
        }
        {
          this.state.visible ?
            <AddBlacklist onHide={this.hideModal}/> : ''
        }
      </div>
    );
  }
}